@else { @return transparentize(black,$_lbg*0.8); }
}
+@function _button_hilight_color($c) {
+//
+// calculate the right top hilight color for buttons
+//
+// $c: base color;
+//
+ @if lightness($c)>90% { @return white; }
+ @else if lightness($c)>80% { @return transparentize(white, 0.3); }
+ @else if lightness($c)>50% { @return transparentize(white, 0.5); }
+ @else if lightness($c)>40% { @return transparentize(white, 0.7); }
+ @else { @return transparentize(white, 0.9); }
+}
+
@mixin _button_text_shadow ($tc:$fg_color, $bg:$bg_color) {
//
// helper function for the text emboss effect
// osd, osd-hover, osd-active, osd-insensitive, osd-backdrop, undecorated
//
- $_top_hilight: if(lightness($c)> 70%, white, transparentize(white,0.9)); //not just dark/light but colored buttons
-
+ $_hilight_color: _button_hilight_color($c);
$_button_edge: if($edge == none, none, _widget_edge($edge));
$_blank_edge: if($edge == none, none, _widget_edge(transparentize($edge,1)));
@else { border-color: $borders_color; }
@include _button_text_shadow($tc,$c);
- @include _shadows(inset 0 1px $_top_hilight, $_button_edge);
+ @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
}
@else if $t==hover {
$c);
@include _button_text_shadow($tc,lighten($c,4%));
- @include _shadows(inset 0 1px $_top_hilight, $_button_edge);
+ @include _shadows(inset 0 1px $_hilight_color, $_button_edge);
}
@else if $t==active {
border-color: #5e0707;
text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1);
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1);
outline-color: rgba(255, 255, 255, 0.3); }
.button.destructive-action:hover {
color: white;
background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010);
text-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px rgba(238, 238, 236, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px rgba(238, 238, 236, 0.1); }
.button.destructive-action:active, .button.destructive-action:checked {
color: white;
border-color: #5e0707;
border-color: #5e0707;
text-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.64078);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
.message-dialog.csd .dialog-action-area .button.destructive-action:hover {
color: white;
border-color: #5e0707;
background-image: linear-gradient(to bottom, #f03c3c, #e81111 40%, #d51010);
text-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.60878);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.3); }
.message-dialog.csd .dialog-action-area .button.destructive-action:active {
color: white;
border-color: #5e0707;
border-color: #1c5187;
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white;
outline-color: rgba(255, 255, 255, 0.3); }
.button.suggested-action:hover {
color: white;
background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; }
.button.suggested-action:active, .button.suggested-action:checked {
color: white;
border-color: #1c5187;
border-color: #8e0b0b;
text-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white;
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white;
outline-color: rgba(255, 255, 255, 0.3); }
.button.destructive-action:hover {
color: white;
background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
text-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), 0 1px white; }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 1px white; }
.button.destructive-action:active, .button.destructive-action:checked {
color: white;
border-color: #8e0b0b;
border-color: #1c5187;
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.titlebar.selection-mode .button:hover, GtkCalendar.selection-mode.header .button:hover,
.header-bar.selection-mode .button:hover {
color: #ffffff;
background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.titlebar.selection-mode .button:active, GtkCalendar.selection-mode.header .button:active, .titlebar.selection-mode .button:checked, GtkCalendar.selection-mode.header .button:checked,
.header-bar.selection-mode .button:active,
.header-bar.selection-mode .button:checked {
border-color: #1c5187;
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.message-dialog.csd .dialog-action-area .button.suggested-action:hover {
color: white;
border-color: #1c5187;
background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.message-dialog.csd .dialog-action-area .button.suggested-action:active {
color: white;
border-color: #1c5187;
border-color: #8e0b0b;
text-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.56078);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.message-dialog.csd .dialog-action-area .button.destructive-action:hover {
color: white;
border-color: #8e0b0b;
background-image: linear-gradient(to bottom, #f46b6b, #f03c3c 40%, #ef2929);
text-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.52878);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.message-dialog.csd .dialog-action-area .button.destructive-action:active {
color: white;
border-color: #8e0b0b;
border-color: #1c5187;
text-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.54353);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.info .button:hover,
.question .button:hover,
.warning .button:hover,
background-image: linear-gradient(to bottom, #85b4e5, #5b9add 40%, #4a90d9);
text-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
icon-shadow: 0 -1px rgba(0, 0, 0, 0.51153);
- box-shadow: inset 0 1px rgba(255, 255, 255, 0.1); }
+ box-shadow: inset 0 1px rgba(255, 255, 255, 0.5); }
.info .button:active,
.question .button:active,
.warning .button:active,